<template>
  <section class="productCenter">
    <img class="img" src="@/assets/images/productCenter/Group-256.jpg" lazy-load />
    <section class="productCenter-content" v-show="isShow">
      <p class="productCenter-title">产品技术</p>
      <ul>
        <li v-for="(item, index) in list" :key="index" :ref="setRef">
          <img class="img" :src="item.img" lazy-load />
          <p>{{ item.title }}</p>
          <p>{{ item.desc }}</p>
          <p @click="handelLook(item, index)">了解更多></p>
        </li>
      </ul>
    </section>
    <section v-show="!isShow">
      <p class="back" @click="handelLook(list[detailIndex], detailIndex)" ref="title">&lt返回</p>
      <component :is="activeName" keep-alive />
    </section>
  </section>
</template>

<script setup lang="ts">
import detail1 from './components/detail1.vue'
import detail2 from './components/detail2.vue'
import detail3 from './components/detail3.vue'
import detail4 from './components/detail4.vue'
import detail5 from './components/detail5.vue'
import detail6 from './components/detail6.vue'

import { reactive, ref, markRaw, nextTick, Ref } from 'vue'
//定义ts 接口类型
interface editFormDataType {
  title: string
  desc: string
  img: string
}
let list: editFormDataType[] = reactive([
  {
    title: 'EYEMASTER _双目嵌入式门禁控制器',
    desc: 'MASTERS一个虹膜识别门禁控制器，可以同时准 确地登记和认证两只眼睛。嵌入式类型和独立类型是 可选的。虹膜识技术作为一种非接触式生物识另IJ技 术，比接触式生物识SU技术具有更高的安全性和便利 性。此外，它适用于各种解决方案和应用程 序。',
    img: new URL(
      `../../assets/images/productCenter/Frame268(4).png`,
      import.meta.url
    ).href,
    key: markRaw(detail1),
  },
  {
    title: 'USB & Embedded Module _虹膜识别模块',
    desc: '虹膜识别模块由虹膜识另U摄像机和处理板组成。采用优化算法，支持1:1认证和1：N识别，提高识别率。此外，它的设计适用于 不同的产品。',
    img: new URL(
      `../../assets/images/productCenter/Frame269(2).png`,
      import.meta.url
    ).href,
    key: markRaw(detail2),
  },
  {
    title: '韩国国内首台自动对焦远距离虹膜识别USB摄像机',
    desc: '便携式虹膜识别设备 IKUSB-300A是一款为了满足信息设备解锁、文件加密等客户需求而设计的，既可安装在电脑屏幕上方，又可以手持或放置于桌面上的虹膜识别设备，使普通的电脑或笔记本具备虹膜识别功能，可...',
    img: new URL(
      `../../assets/images/productCenter/Group149.png`,
      import.meta.url
    ).href,
    key: markRaw(detail3),
  },
  {
    title: 'IRIS SCOPE _虹膜识别门禁控制器',
    desc: 'RIS SCOPE是世界上唯一的单眼SCOPE型相机。它可以精 确地鉴别一只眼睛和面部的图像。IRISSCCPE可用于室 内和室外环境。它是恶劣天气环境的理想产品，可承受 更宽的温度范围。',

    img: new URL(
      `../../assets/images/productCenter/Frame357.png`,
      import.meta.url
    ).href,
    key: markRaw(detail4),
  },
  {
    title: 'IRIS-W',
    desc: '智能虹膜人脸一体机 IKAI1000.集虹膜和人脸识别为一体的智能终端产品。该产品使用高速、超清虹膜相机和LCD显示器，自适应不同身高人群，可自动、快速抓取高质量虹膜图像，同时可集成红外体温检测模块，...',
    img: new URL(
      `../../assets/images/productCenter/Frame333(2).png`,
      import.meta.url
    ).href,
    key: markRaw(detail5),
  },
  {
    title: 'IRIS K',
    desc: 'IKAI900基于精准的虹膜识别技术、红外测温技术；用于大规模人员身份识别认证而推出的一款高端生物识别产品；安装于社区出入口，主要服务于社区人员管理。Ø 识别能力强：佩戴口罩、护目镜，穿戴...',
    img: new URL(
      `../../assets/images/productCenter/iris1(1).png`,
      import.meta.url
    ).href,
    key: markRaw(detail6),
  },
])
let isShow = ref(true)
let detailIndex = ref(0)
let activeName = ref(markRaw(detail1))
const title: Ref<HTMLElement | null> = ref(null)
const handelLook = (item: any, index: number) => {
  isShow.value = !isShow.value
  detailIndex.value = index
  activeName.value = item.key
  if (!isShow.value) {
    nextTick(() => {
      ;(title.value as HTMLElement).scrollIntoView({
        behavior: 'smooth',
        block: 'end',
      })
    })
  } else {
    nextTick(() => {
      ;(product.value[index] as HTMLElement).scrollIntoView({
        behavior: 'smooth',
        block: 'end',
      })
    })
  }
}
const product = ref([])
const setRef = (el: HTMLElement) => {
  ;(product.value as Array<HTMLElement>).push(el)
}
</script>

<style lang="scss" scoped>
.productCenter {
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  margin-bottom: 160px;
  &-content {
    padding: 0 68px;
  }
  &-title {
    font-size: 44px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    color: #2087e3;
    margin: 60px 0 14px;
  }
  ul {
    li {
      margin-top: 60px;
      &:first-child {
        margin-top: 0;
      }
      p {
        &:first-of-type {
          font-size: 32px;
          font-family: Source Han Sans CN, Source Han Sans CN-Bold;
          font-weight: 700;
          color: #333;
          margin: 40px 0;
        }
        &:nth-of-type(2) {
          font-size: 28px;
          color: #686868;
          line-height: 48px;
        }
        &:last-of-type {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 202px;
          height: 76px;
          border-radius: 14px 0px 14px 0px;
          background-color: #2087e3;
          color: #fff;
          font-size: 28px;
          margin-top: 40px;
        }
      }
    }
  }
  .back {
    font-size: 28px;
    color: #333;
    margin: 20px 0 0 24px;
  }
}
</style>